.system[data-system-theme*='light'],
.light,
.system[data-system-theme*='dark'],
.dark,
.black,
.gray,
.dracula,
.catppuccinMocha,
.pastelPink,
.hotPink,
.nordic,
.solarizedDark,
.solarizedLight {
  --primary-input-color: rgb(0 0 0 / 50%);
  --top-bar-push-down-adjustment-default: -35px;

  /* Value of 0 without 'px' does not work inside calc() */
  /* stylelint-disable length-zero-no-unit */
  --top-bar-push-down-adjustment-no-description: 0px;
  --top-bar-push-down-adjustment-edit-mode: 0px;
  --top-bar-push-down-adjustment-one-or-fewer: 0px;
  /* stylelint-enable length-zero-no-unit */
  --destructive-color: #f44336;
  --destructive-text-color: #000;
  --destructive-hover-color: #e53935;
  --destructive-active-color: #c62828;
}

.system[data-system-theme*='light'],
.light,
.system[data-system-theme*='dark'],
.dark,
.black,
.dracula,
.catppuccinMocha,
.pastelPink,
.hotPink,
.nordic,
.solarizedDark,
.solarizedLight {
  --link-color: var(--accent-color);
  --link-visited-color: var(--accent-color-visited);
  --instance-menu-color: var(--search-bar-color);
}

.system[data-system-theme*='light'],
.light,
.system[data-system-theme*='dark'],
.dark,
.black,
.gray,
.dracula,
.catppuccinMocha,
.pastelPink,
.nordic,
.solarizedDark,
.solarizedLight {
  --primary-input-color: rgb(0 0 0 / 50%);
  --side-nav-hover-text-color: var(--primary-text-color);
}

.system[data-system-theme*='light'],
.light,
.system[data-system-theme*='dark'],
.dark,
.black,
.gray,
.dracula,
.catppuccinMocha,
.nordic,
.solarizedDark,
.solarizedLight {
  --side-nav-active-text-color: var(--primary-text-color);
  --scrollbar-text-color-hover: var(--primary-text-color);

}

.catppuccinMocha,
.dracula,
.hotPink,
.nordic,
.pastelPink,
.solarizedDark,
.solarizedLight {
  --logo-primary-color: var(--primary-text-color);
  --logo-secondary-color: var(--primary-text-color);
  --logo-tertiary-color: var(--primary-text-color);
}

.system[data-system-theme*='light'],
.light,
.system[data-system-theme*='dark'],
.dark,
.black,
.gray {
  --logo-icon: url('../../_icons/iconColorSmall.svg');
  --logo-text: url('../../_icons/textColorSmall.svg');
  --logo-primary-color: #f33;
  --logo-secondary-color: #29abe1;
  --logo-tertiary-color: #000;
}

.system[data-system-theme*='dark'],
.dark,
.black,
.gray,
.dracula,
.catppuccinMocha,
.hotPink,
.nordic,
.solarizedDark,
.solarizedLight {
  --primary-shadow-color: rgb(0 0 0 / 75%);
}

.system[data-system-theme*='light'],
.light {
  --primary-text-color: #212121;
  --secondary-text-color: #424242;
  --tertiary-text-color: #757575;
  --primary-shadow-color: rgb(232 232 232 / 100%);
  --title-color: #3f7ac6;
  --bg-color: #f1f1f1;
  --favorite-icon-color: #0c0;
  --card-bg-color: #fff;
  --secondary-card-bg-color: #eee;
  --scrollbar-color: #ccc;
  --scrollbar-color-hover: #bdbdbd;
  --side-nav-color: #fff;
  --side-nav-hover-color: #e0e0e0;
  --side-nav-active-color: #757575;
  --search-bar-color: #f5f5f5;
}

.system[data-system-theme*='dark'],
.dark {
  --primary-text-color: #eee;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #999;
  --title-color: #eee;
  --bg-color: #212121;
  --favorite-icon-color: #0f0;
  --card-bg-color: #303030;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --scrollbar-color: #414141;
  --scrollbar-color-hover: #757575;
  --side-nav-color: #262626;
  --side-nav-hover-color: #212121;
  --side-nav-active-color: #303030;
  --search-bar-color: #262626;
}

.black {
  --primary-text-color: #eee;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #eee;
  --title-color: #eee;
  --bg-color: #000;
  --favorite-icon-color: #0f0;
  --card-bg-color: #000;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --scrollbar-color: #515151;
  --scrollbar-color-hover: #424242;
  --side-nav-color: #0f0f0f;
  --side-nav-hover-color: #212121;
  --side-nav-active-color: #303030;
  --search-bar-color: #262626;
}

.gray {
  --primary-text-color: #eee;
  --secondary-text-color: #e0e0e0;
  --tertiary-text-color: #f5f5f5;
  --title-color: #eee;
  --bg-color: #212121;
  --card-bg-color: #303030;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --side-nav-color: #262626;
  --side-nav-hover-color: #212121;
  --side-nav-active-color: #303030;
  --search-bar-color: #212121;
}

.dracula {
  --primary-text-color: #f8f8f2;
  --secondary-text-color: #c6cee6;
  --tertiary-text-color: #e5e8f3;
  --title-color: #bd93f9;
  --bg-color: #282a36;
  --favorite-icon-color: #0f0;
  --card-bg-color: #33353f;
  --secondary-card-bg-color: #282a36;
  --scrollbar-color: #44475a;
  --scrollbar-color-hover: #3d4051;
  --side-nav-color: #44475a;
  --side-nav-hover-color: #57596b;
  --side-nav-active-color: #3d4051;
  --search-bar-color: #3e3f4a;
  --logo-icon: url('../../_icons/iconDraculaLightSmall.svg');
  --logo-text: url('../../_icons/textDraculaLightSmall.svg');
}

.catppuccinMocha {
  --primary-text-color: #cdd6f4;
  --secondary-text-color: #bac2de;
  --tertiary-text-color: #a6adc8;
  --title-color: var(--accent-color);
  --bg-color: #1e1e2e;
  --favorite-icon-color: #0f0;
  --card-bg-color: #181825;
  --secondary-card-bg-color: #1e1e2e;
  --scrollbar-color: #313244;
  --scrollbar-color-hover: #3d4051;
  --side-nav-color: #181825;
  --side-nav-hover-color: #11111b;
  --side-nav-active-color: #11111b;
  --search-bar-color: #313244;
  --logo-icon: url('../../_icons/iconCatppuccinMochaLightSmall.svg');
  --logo-text: url('../../_icons/textCatppuccinMochaLightSmall.svg');
}

.pastelPink {
  --primary-text-color: #1f002b;
  --secondary-text-color: #361836;
  --tertiary-text-color: #5a285a;
  --primary-shadow-color: rgb(255 240 240 / 50%);
  --title-color: #185eb4;
  --bg-color: #ffeadd;
  --favorite-icon-color: #760278;
  --card-bg-color: #ffd1dc;
  --secondary-card-bg-color: #fff;
  --scrollbar-color: #f5c8d3;
  --scrollbar-color-hover: #760278;
  --scrollbar-text-color-hover: var(--scrollbar-color);
  --side-nav-color: #ffd1dc;
  --side-nav-hover-color: #cef4f1;
  --side-nav-active-color: #3124e7;
  --side-nav-active-text-color: #ffff;
  --search-bar-color: #fff0dd;
  --logo-icon: url('../../_icons/iconBlackSmall.svg');
  --logo-text: url('../../_icons/textBlackSmall.svg');
}

.nordic {
  --primary-text-color: #eee;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #eee;
  --title-color: #eee;
  --bg-color: #2b2f3a;
  --favorite-icon-color: #0f0;
  --card-bg-color: #2e3440;
  --secondary-card-bg-color: rgb(59 66 82 / 75%);
  --scrollbar-color: #4b566a;
  --scrollbar-color-hover: #4b566a;
  --side-nav-color: #2e3440;
  --side-nav-hover-color: #3b4252;
  --side-nav-active-color: #3b4252;
  --search-bar-color: #4b566a;
  --logo-icon: url('../../_icons/iconNordicLightSmall.svg');
  --logo-text: url('../../_icons/textNordicLightSmall.svg');
}

.hotPink {
  --primary-text-color: #ffff;
  --secondary-text-color: #ffff;
  --tertiary-text-color: #ffff;
  --title-color: #000;
  --bg-color: #ff008a;
  --favorite-icon-color: #0f0;
  --card-bg-color: #de1c85;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --scrollbar-color: #fff;
  --scrollbar-color-hover: #c0f6ff;
  --scrollbar-text-color-hover: #000;
  --side-nav-color: #ee1e90;
  --side-nav-hover-color: #fff;
  --side-nav-hover-text-color: #000;
  --side-nav-active-color: #959595;
  --side-nav-active-text-color: #000;
  --search-bar-color: #9c2d5d;
  --logo-icon: url('../../_icons/iconWhiteSmall.svg');
  --logo-text: url('../../_icons/textWhiteSmall.svg');

  /* The hot pink theme does not have a great color contrast with
  many other colors than black and white. This means that the primary and
  secondary theme colors are forced here to be black so as to avoid any
  accessibility concerns. */
  --primary-color: #000 !important;
  --primary-color-hover: #000 !important;
  --primary-color-active: #000 !important;
  --text-with-main-color: #fff !important;
  --text-with-accent-color: #fff !important;
  --accent-color: #000 !important;
  --accent-color-hover: #808080 !important;
  --accent-color-active: #6a739a !important;
  --accent-color-light: #000 !important;
  --accent-color-visited: #000 !important;
  --accent-color-opacity1: rgb(0 0 0 / 4%) !important;
  --accent-color-opacity2: rgb(0 0 0 / 12%) !important;
  --accent-color-opacity3: rgb(255 255 255 / 16%) !important;
  --accent-color-opacity4: rgb(255 255 255 / 24%) !important;
}

/* Given that the Hot Pink theme does not need link underlining due to meeting
WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000),
it can be safely elided. This looks quite pleasant on this theme. */
.hotPink a:not(:hover, :focus),
.hotPink .navOption:hover,
.hotPink .navOption:focus,
.hotPink *:not(:hover, :focus) {
  text-decoration: none;
}

.hotPink a:hover,
.hotPink a:focus {
  text-decoration: underline;
}

.solarizedDark {
  --primary-text-color: #fdf6e3;
  --secondary-text-color: #ddd6c3;
  --tertiary-text-color: #ddd6c3;
  --title-color: #fdf6e3;
  --bg-color: #002b36;
  --favorite-icon-color: #0f0;
  --card-bg-color: #204b56;
  --secondary-card-bg-color: #102b36;
  --scrollbar-color: #608b96;
  --scrollbar-color-hover: #406b76;
  --side-nav-color: #204b56;
  --side-nav-hover-color: #608b96;
  --side-nav-active-color: #406b76;
  --search-bar-color: #073642;
  --logo-icon: url('../../_icons/iconSolarizedLightSmall.svg');
  --logo-text: url('../../_icons/textSolarizedLightSmall.svg');
}

.solarizedLight {
  --primary-text-color: #002b36;
  --secondary-text-color: #204b56;
  --tertiary-text-color: #204b56;
  --title-color: #002b36;
  --bg-color: #fdf6e3;
  --favorite-icon-color: #0f0;
  --card-bg-color: #eee8d5;
  --secondary-card-bg-color: #fdf6e3;
  --scrollbar-color: #a9a895;
  --scrollbar-color-hover: #839496;
  --side-nav-color: #eee8d5;
  --side-nav-hover-color: #fdf6e3;
  --side-nav-active-color: #839496;
  --search-bar-color: #c9c8b5;
  --logo-icon: url('../../_icons/iconSolarizedDarkSmall.svg');
  --logo-text: url('../../_icons/textSolarizedDarkSmall.svg');
}

.mainRed,
.mainPink,
.mainPurple,
.mainDeepPurple,
.mainIndigo,
.mainBlue,
.mainLightBlue,
.mainCyan,
.mainTeal,
.mainGreen {
  --text-with-main-color: #fff;
  --logo-icon-bar-color: url('../../_icons/iconWhiteSmall.svg');
  --logo-text-bar-color: url('../../_icons/textWhiteSmall.svg');
}

.mainLightGreen,
.mainLime,
.mainYellow,
.mainAmber,
.mainOrange,
.mainDeepOrange {
  --text-with-main-color: #000;
  --logo-icon-bar-color: url('../../_icons/iconBlackSmall.svg');
  --logo-text-bar-color: url('../../_icons/textBlackSmall.svg');
}

.mainRed {
  --primary-color: #f44336;
  --primary-color-hover: #e53935;
  --primary-color-active: #c62828;
}

.mainPink {
  --primary-color: #e91e63;
  --primary-color-hover: #d81b60;
  --primary-color-active: #ad1457;
}

.mainPurple {
  --primary-color: #9c27b0;
  --primary-color-hover: #8e24aa;
  --primary-color-active: #6a1b9a;
}

.mainDeepPurple {
  --primary-color: #673ab7;
  --primary-color-hover: #5e35b1;
  --primary-color-active: #4527a0;
}

.mainIndigo {
  --primary-color: #3f51b5;
  --primary-color-hover: #3949ab;
  --primary-color-active: #283593;
}

.mainBlue {
  --primary-color: #2196f3;
  --primary-color-hover: #1e88e5;
  --primary-color-active: #1565c0;
}

.mainLightBlue {
  --primary-color: #03a9f4;
  --primary-color-hover: #039be5;
  --primary-color-active: #0277bd;
}

.mainCyan {
  --primary-color: #00bcd4;
  --primary-color-hover: #00acc1;
  --primary-color-active: #00838f;
}

.mainTeal {
  --primary-color: #009688;
  --primary-color-hover: #00897b;
  --primary-color-active: #00695c;
}

.mainGreen {
  --primary-color: #4caf50;
  --primary-color-hover: #43a047;
  --primary-color-active: #2e7d32;
}

.mainLightGreen {
  --primary-color: #8bc34a;
  --primary-color-hover: #7cb342;
  --primary-color-active: #558b2f;
}

.mainLime {
  --primary-color: #cddc39;
  --primary-color-hover: #c0ca33;
  --primary-color-active: #9e9d24;
}

.mainYellow {
  --primary-color: #ffeb3b;
  --primary-color-hover: #fdd835;
  --primary-color-active: #f9a825;
}

.mainAmber {
  --primary-color: #ffc107;
  --primary-color-hover: #ffb300;
  --primary-color-active: #ff8f00;
}

.mainOrange {
  --primary-color: #ff9800;
  --primary-color-hover: #fb8c00;
  --primary-color-active: #ef6c00;
}

.mainDeepOrange {
  --primary-color: #ff5722;
  --primary-color-hover: #f4511e;
  --primary-color-active: #d84315;
}

.mainDraculaCyan,
.mainDraculaGreen,
.mainDraculaOrange,
.mainDraculaRed,
.mainDraculaYellow {
  --text-with-main-color: #282a36;
  --logo-icon-bar-color: url('../../_icons/iconDraculaDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaDarkSmall.svg');
}

.mainDraculaPink,
.mainDraculaPurple {
  --text-with-main-color: #f8f8f2;
  --logo-icon-bar-color: url('../../_icons/iconDraculaLightSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaLightSmall.svg');
}

.mainDraculaCyan {
  --primary-color: #8be9fd;
  --primary-color-hover: #97ebfd;
  --primary-color-active: #7dd2e4;
}

.mainDraculaGreen {
  --primary-color: #50fa7b;
  --primary-color-hover: #62fb88;
  --primary-color-active: #48e16f;
}

.mainDraculaOrange {
  --primary-color: #ffb86c;
  --primary-color-hover: #ffbf7b;
  --primary-color-active: #e6a661;
}

.mainDraculaPink {
  --primary-color: #ff79c6;
  --primary-color-hover: #ff86cc;
  --primary-color-active: #e66db2;
}

.mainDraculaPurple {
  --primary-color: #bd93f9;
  --primary-color-hover: #c49efa;
  --primary-color-active: #aa84e0;
}

.mainDraculaRed {
  --primary-color: #f55;
  --primary-color-hover: #f66;
  --primary-color-active: #e64d4d;
}

.mainDraculaYellow {
  --primary-color: #f1fa8c;
  --primary-color-hover: #f2fb98;
  --primary-color-active: #d9e17e;
}

.mainCatppuccinMochaRosewater,
.mainCatppuccinMochaFlamingo,
.mainCatppuccinMochaPink,
.mainCatppuccinMochaMauve,
.mainCatppuccinMochaRed,
.mainCatppuccinMochaMaroon,
.mainCatppuccinMochaPeach,
.mainCatppuccinMochaYellow,
.mainCatppuccinMochaGreen,
.mainCatppuccinMochaTeal,
.mainCatppuccinMochaSky,
.mainCatppuccinMochaSapphire,
.mainCatppuccinMochaBlue,
.mainCatppuccinMochaLavender {
  --text-with-main-color: #1e1e2e;
  --logo-icon-bar-color: url('../../_icons/iconCatppuccinMochaDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textCatppuccinMochaDarkSmall.svg');
}

.mainCatppuccinMochaRosewater {
  --primary-color: #f5e0dc;
  --primary-color-hover: #fceeec;
  --primary-color-active: #e1c8c3;
}

.mainCatppuccinMochaFlamingo {
  --primary-color: #f2cdcd;
  --primary-color-hover: #f2e1e1;
  --primary-color-active: #ddb7b7;
}

.mainCatppuccinMochaPink {
  --primary-color: #f5c2e7;
  --primary-color-hover: #f3d2ea;
  --primary-color-active: #dca3cd;
}

.mainCatppuccinMochaMauve {
  --primary-color: #cba6f7;
  --primary-color-hover: #d4b7f8;
  --primary-color-active: #b38fdf;
}

.mainCatppuccinMochaRed {
  --primary-color: #f38ba8;
  --primary-color-hover: #f0a4b9;
  --primary-color-active: #de7693;
}

.mainCatppuccinMochaMaroon {
  --primary-color: #eba0ac;
  --primary-color-hover: #eabbc3;
  --primary-color-active: #d68895;
}

.mainCatppuccinMochaPeach {
  --primary-color: #fab387;
  --primary-color-hover: #f7c7a9;
  --primary-color-active: #e1996d;
}

.mainCatppuccinMochaYellow {
  --primary-color: #f9e2af;
  --primary-color-hover: #feeecd;
  --primary-color-active: #dec48d;
}

.mainCatppuccinMochaGreen {
  --primary-color: #a6e3a1;
  --primary-color-hover: #bfebbb;
  --primary-color-active: #86c780;
}

.mainCatppuccinMochaTeal {
  --primary-color: #94e2d5;
  --primary-color-hover: #aceae0;
  --primary-color-active: #6fc5b7;
}

.mainCatppuccinMochaSky {
  --primary-color: #89dceb;
  --primary-color-hover: #a3e4f0;
  --primary-color-active: #68bcca;
}

.mainCatppuccinMochaSapphire {
  --primary-color: #74c7ec;
  --primary-color-hover: #93d1ed;
  --primary-color-active: #59a9cf;
}

.mainCatppuccinMochaBlue {
  --primary-color: #89b4fa;
  --primary-color-hover: #a6c8ff;
  --primary-color-active: #6593df;
}

.mainCatppuccinMochaLavender {
  --primary-color: #b4befe;
  --primary-color-hover: #c9d0ff;
  --primary-color-active: #8d98e4;
}

.mainSolarizedYellow,
.mainSolarizedOrange,
.mainSolarizedRed,
.mainSolarizedMagenta,
.mainSolarizedViolet,
.mainSolarizedGreen {
  --text-with-main-color: #fdf6e3;
  --logo-icon-bar-color: url('../../_icons/iconDraculaLightSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaLightSmall.svg');
}

.mainSolarizedBlue,
.mainSolarizedCyan {
  --text-with-main-color: #000;
  --logo-icon-bar-color: url('../../_icons/iconDraculaDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaDarkSmall.svg');
}

.mainSolarizedYellow {
  --primary-color: #b58900;
  --primary-color-hover: #d5a920;
  --primary-color-active: #f5c940;
}

.mainSolarizedOrange {
  --primary-color: #cb4b16;
  --primary-color-hover: #eb6b36;
  --primary-color-active: #fc8b56;
}

.mainSolarizedRed {
  --primary-color: #dc322f;
  --primary-color-hover: #fc524f;
  --primary-color-active: #fe726f;
}

.mainSolarizedMagenta {
  --primary-color: #d33682;
  --primary-color-hover: #f356a2;
  --primary-color-active: #f558c2;
}

.mainSolarizedViolet {
  --primary-color: #6c71c4;
  --primary-color-hover: #8c91e4;
  --primary-color-active: #acb1f4;
}

.mainSolarizedBlue {
  --primary-color: #268bd2;
  --primary-color-hover: #46abf2;
  --primary-color-active: #66cbf4;
}

.mainSolarizedCyan {
  --primary-color: #2aa198;
  --primary-color-hover: #4ac1b8;
  --primary-color-active: #6ae1d8;
}

.mainSolarizedGreen {
  --primary-color: #859900;
  --primary-color-hover: #a5b920;
  --primary-color-active: #c5d940;
}

.secRed,
.secPink,
.secPurple,
.secDeepPurple,
.secIndigo,
.secBlue,
.secLightBlue,
.secCyan,
.secTeal,
.secGreen {
  --text-with-accent-color: #fff;
}

.secLightGreen,
.secLime,
.secYellow,
.secAmber,
.secOrange,
.secDeepOrange {
  --text-with-accent-color: #000;
}

.secRed {
  --accent-color: #f44336;
  --accent-color-hover: #e53935;
  --accent-color-active: #c62828;
  --accent-color-light: #ef9a9a;
  --accent-color-visited: #b71c1c;
  --accent-color-opacity1: rgb(244 67 54 / 4%);
  --accent-color-opacity2: rgb(244 67 54 / 12%);
  --accent-color-opacity3: rgb(244 67 54 / 16%);
  --accent-color-opacity4: rgb(244 67 54 / 24%);
}

.secPink {
  --accent-color: #e91e63;
  --accent-color-hover: #d81b60;
  --accent-color-active: #ad1457;
  --accent-color-light: #f48fb1;
  --accent-color-visited: #880e4f;
  --accent-color-opacity1: rgb(233 30 99 / 4%);
  --accent-color-opacity2: rgb(233 30 99 / 12%);
  --accent-color-opacity3: rgb(233 30 99 / 16%);
  --accent-color-opacity4: rgb(233 30 99 / 24%);
}

.secPurple {
  --accent-color: #9c27b0;
  --accent-color-hover: #8e24aa;
  --accent-color-active: #6a1b9a;
  --accent-color-light: #ce93d8;
  --accent-color-visited: #4a148c;
  --accent-color-opacity1: rgb(156 39 176 / 4%);
  --accent-color-opacity2: rgb(156 39 176 / 12%);
  --accent-color-opacity3: rgb(156 39 176 / 16%);
  --accent-color-opacity4: rgb(156 39 176 / 24%);
}

.secDeepPurple {
  --accent-color: #673ab7;
  --accent-color-hover: #5e35b1;
  --accent-color-active: #4527a0;
  --accent-color-light: #b39ddb;
  --accent-color-visited: #311b92;
  --accent-color-opacity1: rgb(103 58 183 / 4%);
  --accent-color-opacity2: rgb(103 58 183 / 12%);
  --accent-color-opacity3: rgb(103 58 183 / 16%);
  --accent-color-opacity4: rgb(103 58 183 / 24%);
}

.secIndigo {
  --accent-color: #3f51b5;
  --accent-color-hover: #3949ab;
  --accent-color-active: #283593;
  --accent-color-light: #9fa8da;
  --accent-color-visited: #1a237e;
  --accent-color-opacity1: rgb(63 81 181 / 4%);
  --accent-color-opacity2: rgb(63 81 181 / 12%);
  --accent-color-opacity3: rgb(63 81 181 / 16%);
  --accent-color-opacity4: rgb(63 81 181 / 24%);
}

.secBlue {
  --accent-color: #2196f3;
  --accent-color-hover: #1e88e5;
  --accent-color-active: #1565c0;
  --accent-color-light: #90caf9;
  --accent-color-visited: #0d47a1;
  --accent-color-opacity1: rgb(33 150 243 / 4%);
  --accent-color-opacity2: rgb(33 150 243 / 12%);
  --accent-color-opacity3: rgb(33 150 243 / 16%);
  --accent-color-opacity4: rgb(33 150 243 / 24%);
}

.secLightBlue {
  --accent-color: #03a9f4;
  --accent-color-hover: #039be5;
  --accent-color-active: #0277bd;
  --accent-color-light: #81d4fa;
  --accent-color-visited: #01579b;
  --accent-color-opacity1: rgb(3 169 244 / 4%);
  --accent-color-opacity2: rgb(3 169 244 / 12%);
  --accent-color-opacity3: rgb(3 169 244 / 16%);
  --accent-color-opacity4: rgb(3 169 244 / 24%);
}

.secCyan {
  --accent-color: #00bcd4;
  --accent-color-hover: #00acc1;
  --accent-color-active: #00838f;
  --accent-color-light: #80deea;
  --accent-color-visited: #006064;
  --accent-color-opacity1: rgb(0 188 212 / 4%);
  --accent-color-opacity2: rgb(0 188 212 / 12%);
  --accent-color-opacity3: rgb(0 188 212 / 16%);
  --accent-color-opacity4: rgb(0 188 212 / 24%);
}

.secTeal {
  --accent-color: #009688;
  --accent-color-hover: #00897b;
  --accent-color-active: #00695c;
  --accent-color-light: #80cbc4;
  --accent-color-visited: #004d40;
  --accent-color-opacity1: rgb(0 150 136 / 4%);
  --accent-color-opacity2: rgb(0 150 136 / 12%);
  --accent-color-opacity3: rgb(0 150 136 / 16%);
  --accent-color-opacity4: rgb(0 150 136 / 24%);
}

.secGreen {
  --accent-color: #4caf50;
  --accent-color-hover: #43a047;
  --accent-color-active: #2e7d32;
  --accent-color-light: #a5d6a7;
  --accent-color-visited: #1b5e20;
  --accent-color-opacity1: rgb(76 175 80 / 4%);
  --accent-color-opacity2: rgb(76 175 80 / 12%);
  --accent-color-opacity3: rgb(76 175 80 / 16%);
  --accent-color-opacity4: rgb(76 175 80 / 24%);
}

.secLightGreen {
  --accent-color: #8bc34a;
  --accent-color-hover: #7cb342;
  --accent-color-active: #558b2f;
  --accent-color-light: #c5e1a5;
  --accent-color-visited: #33691e;
  --accent-color-opacity1: rgb(139 195 74 / 4%);
  --accent-color-opacity2: rgb(139 195 74 / 12%);
  --accent-color-opacity3: rgb(139 195 74 / 16%);
  --accent-color-opacity4: rgb(139 195 74 / 24%);
}

.secLime {
  --accent-color: #cddc39;
  --accent-color-hover: #c0ca33;
  --accent-color-active: #9e9d24;
  --accent-color-light: #e6ee9c;
  --accent-color-visited: #827717;
  --accent-color-opacity1: rgb(205 220 57 / 4%);
  --accent-color-opacity2: rgb(205 220 57 / 12%);
  --accent-color-opacity3: rgb(205 220 57 / 16%);
  --accent-color-opacity4: rgb(205 220 57 / 24%);
}

.secYellow {
  --accent-color: #ffeb3b;
  --accent-color-hover: #fdd835;
  --accent-color-active: #f9a825;
  --accent-color-light: #fff59d;
  --accent-color-visited: #f57f17;
  --accent-color-opacity1: rgb(255 235 59 / 4%);
  --accent-color-opacity2: rgb(255 235 59 / 12%);
  --accent-color-opacity3: rgb(255 235 59 / 16%);
  --accent-color-opacity4: rgb(255 235 59 / 24%);
}

.secAmber {
  --accent-color: #ffc107;
  --accent-color-hover: #ffb300;
  --accent-color-active: #ff8f00;
  --accent-color-light: #ffe082;
  --accent-color-visited: #ff6f00;
  --accent-color-opacity1: rgb(255 193 7 / 4%);
  --accent-color-opacity2: rgb(255 193 7 / 12%);
  --accent-color-opacity3: rgb(255 193 7 / 16%);
  --accent-color-opacity4: rgb(255 193 7 / 24%);
}

.secOrange {
  --accent-color: #ff9800;
  --accent-color-hover: #fb8c00;
  --accent-color-active: #ef6c00;
  --accent-color-light: #ffcc80;
  --accent-color-visited: #e65100;
  --accent-color-opacity1: rgb(255 152 0 / 4%);
  --accent-color-opacity2: rgb(255 152 0 / 12%);
  --accent-color-opacity3: rgb(255 152 0 / 16%);
  --accent-color-opacity4: rgb(255 152 0 / 24%);
}

.secDeepOrange {
  --accent-color: #ff5722;
  --accent-color-hover: #f4511e;
  --accent-color-active: #d84315;
  --accent-color-light: #ffab91;
  --accent-color-visited: #bf360c;
  --accent-color-opacity1: rgb(255 87 34 / 4%);
  --accent-color-opacity2: rgb(255 87 34 / 12%);
  --accent-color-opacity3: rgb(255 87 34 / 16%);
  --accent-color-opacity4: rgb(255 87 34 / 24%);
}

.secDraculaCyan,
.secDraculaGreen,
.secDraculaOrange,
.secDraculaRed,
.secDraculaYellow {
  --text-with-accent-color: #212121;
}

.secDraculaPink,
.secDraculaPurple {
  --text-with-accent-color: #f8f8f2;
}

.secDraculaCyan,
.secDraculaGreen,
.secDraculaOrange,
.secDraculaPink,
.secDraculaPurple,
.secDraculaRed,
.secDraculaYellow {
  --accent-color-opacity1: rgb(98 114 164 / 4%);
  --accent-color-opacity2: rgb(98 114 164 / 12%);
  --accent-color-opacity3: rgb(98 114 164 / 16%);
  --accent-color-opacity4: rgb(98 114 164 / 24%);
}

.secDraculaCyan {
  --accent-color: #8be9fd;
  --accent-color-hover: #97ebfd;
  --accent-color-active: #7dd2e4;
  --accent-color-light: #a2edfd;
  --accent-color-visited: #6fbaca;

}

.secDraculaGreen {
  --accent-color: #50fa7b;
  --accent-color-hover: #62fb88;
  --accent-color-active: #48e16f;
  --accent-color-light: #73fb95;
  --accent-color-visited: #40c862;
}

.secDraculaOrange {
  --accent-color: #ffb86c;
  --accent-color-hover: #ffbf7b;
  --accent-color-active: #e6a661;
  --accent-color-light: #ffc689;
  --accent-color-visited: #cc9356;
}

.secDraculaPink {
  --accent-color: #ff79c6;
  --accent-color-hover: #ff86cc;
  --accent-color-active: #e66db2;
  --accent-color-light: #ff94d1;
  --accent-color-visited: #cc619e;
}

.secDraculaPurple {
  --accent-color: #bd93f9;
  --accent-color-hover: #c49efa;
  --accent-color-active: #aa84e0;
  --accent-color-light: #caa9fa;
  --accent-color-visited: #9776c7;
}

.secDraculaRed {
  --accent-color: #f55;
  --accent-color-hover: #f66;
  --accent-color-active: #e64d4d;
  --accent-color-light: #f77;
  --accent-color-visited: #c44;
}

.secDraculaYellow {
  --accent-color: #f1fa8c;
  --accent-color-hover: #f2fb98;
  --accent-color-active: #d9e17e;
  --accent-color-light: #f4fba3;
  --accent-color-visited: #c1c870;
}

.secCatppuccinMochaRosewater,
.secCatppuccinMochaFlamingo,
.secCatppuccinMochaPink,
.secCatppuccinMochaMauve,
.secCatppuccinMochaRed,
.secCatppuccinMochaMaroon,
.secCatppuccinMochaPeach,
.secCatppuccinMochaYellow,
.secCatppuccinMochaGreen,
.secCatppuccinMochaTeal,
.secCatppuccinMochaSky,
.secCatppuccinMochaSapphire,
.secCatppuccinMochaBlue,
.secCatppuccinMochaLavender {
  --text-with-accent-color: #1e1e2e;
}

.secCatppuccinMochaRosewater {
  --accent-color: #f5e0dc;
  --accent-color-hover: #fceeec;
  --accent-color-active: #e1c8c3;
  --accent-color-light: #f8eae7;
  --accent-color-visited: #d3a197;
  --accent-color-opacity1: rgb(245 224 220 / 4%);
  --accent-color-opacity2: rgb(245 224 220 / 12%);
  --accent-color-opacity3: rgb(245 224 220 / 16%);
  --accent-color-opacity4: rgb(245 224 220 / 24%);
}

.secCatppuccinMochaFlamingo {
  --accent-color: #f2cdcd;
  --accent-color-hover: #f3d7d7;
  --accent-color-active: #ddb7b7;
  --accent-color-light: #f7dfdf;
  --accent-color-visited: #cf9898;
  --accent-color-opacity1: rgb(242 205 205 / 4%);
  --accent-color-opacity2: rgb(242 205 205 / 12%);
  --accent-color-opacity3: rgb(242 205 205 / 16%);
  --accent-color-opacity4: rgb(242 205 205 / 24%);
}

.secCatppuccinMochaPink {
  --accent-color: #f5c2e7;
  --accent-color-hover: #f3cee9;
  --accent-color-active: #dca3cd;
  --accent-color-light: #f4dbed;
  --accent-color-visited: #d28fc0;
  --accent-color-opacity1: rgb(245 194 231 / 4%);
  --accent-color-opacity2: rgb(245 194 231 / 12%);
  --accent-color-opacity3: rgb(245 194 231 / 16%);
  --accent-color-opacity4: rgb(245 194 231 / 24%);
}

.secCatppuccinMochaMauve {
  --accent-color: #cba6f7;
  --accent-color-hover: #d4b7f8;
  --accent-color-active: #b38fdf;
  --accent-color-light: #d6b9f9;
  --accent-color-visited: #a171da;
  --accent-color-opacity1: rgb(203 166 247 / 4%);
  --accent-color-opacity2: rgb(203 166 247 / 12%);
  --accent-color-opacity3: rgb(203 166 247 / 16%);
  --accent-color-opacity4: rgb(203 166 247 / 24%);
}

.secCatppuccinMochaRed {
  --accent-color: #f38ba8;
  --accent-color-hover: #f399b2;
  --accent-color-active: #de7693;
  --accent-color-light: #f5a3ba;
  --accent-color-visited: #d56c89;
  --accent-color-opacity1: rgb(243 139 168 / 4%);
  --accent-color-opacity2: rgb(243 139 168 / 12%);
  --accent-color-opacity3: rgb(243 139 168 / 16%);
  --accent-color-opacity4: rgb(243 139 168 / 24%);
}

.secCatppuccinMochaMaroon {
  --accent-color: #eba0ac;
  --accent-color-hover: #ebb4bd;
  --accent-color-active: #d68895;
  --accent-color-light: #f0b7c0;
  --accent-color-visited: #c86a79;
  --accent-color-opacity1: rgb(235 160 172 / 4%);
  --accent-color-opacity2: rgb(235 160 172 / 12%);
  --accent-color-opacity3: rgb(235 160 172 / 16%);
  --accent-color-opacity4: rgb(235 160 172 / 24%);
}

.secCatppuccinMochaPeach {
  --accent-color: #fab387;
  --accent-color-hover: #f7bd99;
  --accent-color-active: #e1996d;
  --accent-color-light: #fbc4a2;
  --accent-color-visited: #d78a5b;
  --accent-color-opacity1: rgb(250 179 135 / 4%);
  --accent-color-opacity2: rgb(250 179 135 / 12%);
  --accent-color-opacity3: rgb(250 179 135 / 16%);
  --accent-color-opacity4: rgb(250 179 135 / 24%);
}

.secCatppuccinMochaYellow {
  --accent-color: #f9e2af;
  --accent-color-hover: #f9e7bf;
  --accent-color-active: #dec48d;
  --accent-color-light: #fbeccb;
  --accent-color-visited: #d5b05d;
  --accent-color-opacity1: rgb(249 226 175 / 4%);
  --accent-color-opacity2: rgb(249 226 175 / 12%);
  --accent-color-opacity3: rgb(249 226 175 / 16%);
  --accent-color-opacity4: rgb(249 226 175 / 24%);
}

.secCatppuccinMochaGreen {
  --accent-color: #a6e3a1;
  --accent-color-hover: #b6e3b2;
  --accent-color-active: #86c780;
  --accent-color-light: #bceab8;
  --accent-color-visited: #6ed166;
  --accent-color-opacity1: rgb(166 227 161 / 4%);
  --accent-color-opacity2: rgb(166 227 161 / 12%);
  --accent-color-opacity3: rgb(166 227 161 / 16%);
  --accent-color-opacity4: rgb(166 227 161 / 24%);
}

.secCatppuccinMochaTeal {
  --accent-color: #94e2d5;
  --accent-color-hover: #a1dfd5;
  --accent-color-active: #6fc5b7;
  --accent-color-light: #afe9df;
  --accent-color-visited: #5cccb9;
  --accent-color-opacity1: rgb(148 226 213 / 4%);
  --accent-color-opacity2: rgb(148 226 213 / 12%);
  --accent-color-opacity3: rgb(148 226 213 / 16%);
  --accent-color-opacity4: rgb(148 226 213 / 24%);
}

.secCatppuccinMochaSky {
  --accent-color: #89dceb;
  --accent-color-hover: #99dfeb;
  --accent-color-active: #68bcca;
  --accent-color-light: #9fe3ef;
  --accent-color-visited: #64c2d3;
  --accent-color-opacity1: rgb(137 220 235 / 4%);
  --accent-color-opacity2: rgb(137 220 235 / 12%);
  --accent-color-opacity3: rgb(137 220 235 / 16%);
  --accent-color-opacity4: rgb(137 220 235 / 24%);
}

.secCatppuccinMochaSapphire {
  --accent-color: #74c7ec;
  --accent-color-hover: #84c7e6;
  --accent-color-active: #59a9cf;
  --accent-color-light: #93d4f0;
  --accent-color-visited: #6ab6d7;
  --accent-color-opacity1: rgb(116 199 236 / 4%);
  --accent-color-opacity2: rgb(116 199 236 / 12%);
  --accent-color-opacity3: rgb(116 199 236 / 16%);
  --accent-color-opacity4: rgb(116 199 236 / 24%);
}

.secCatppuccinMochaBlue {
  --accent-color: #89b4fa;
  --accent-color-hover: #9bbef6;
  --accent-color-active: #6593df;
  --accent-color-light: #a7c7fb;
  --accent-color-visited: #739cdd;
  --accent-color-opacity1: rgb(137 220 235 / 4%);
  --accent-color-opacity2: rgb(137 220 235 / 12%);
  --accent-color-opacity3: rgb(137 220 235 / 16%);
  --accent-color-opacity4: rgb(137 220 235 / 24%);
}

.secCatppuccinMochaLavender {
  --accent-color: #b4befe;
  --accent-color-hover: #c9d0ff;
  --accent-color-active: #8d98e4;
  --accent-color-light: #d2d8fe;
  --accent-color-visited: #96a1e9;
  --accent-color-opacity1: rgb(180 190 254 / 4%);
  --accent-color-opacity2: rgb(180 190 254 / 12%);
  --accent-color-opacity3: rgb(180 190 254 / 16%);
  --accent-color-opacity4: rgb(180 190 254 / 24%);
}

.secSolarizedYellow,
.secSolarizedOrange,
.secSolarizedRed,
.secSolarizedMagenta,
.secSolarizedViolet,
.secSolarizedGreen {
  --text-with-accent-color: #fdf6e3;
}

.secSolarizedBlue,
.secSolarizedCyan {
  --text-with-accent-color: #000;
}

.secSolarizedYellow {
  --accent-color: #7b5b00;
  --primary-color-hover: #a9a130;
  --accent-color-hover: #bb9f40;
  --accent-color-active: #897710;
  --accent-color-light: #dbc050;
  --accent-color-visited: #a9a130;
  --accent-color-opacity1: rgb(165 165 0 / 4%);
  --accent-color-opacity2: rgb(165 165 0 / 12%);
  --accent-color-opacity3: rgb(165 165 0 / 16%);
  --accent-color-opacity4: rgb(165 165 0 / 24%);
}

.secSolarizedOrange {
  --accent-color: #8b3700;
  --primary-color-hover: #c94d34;
  --accent-color-hover: #db8140;
  --accent-color-active: #b35936;
  --accent-color-light: #eb8156;
  --accent-color-visited: #c94d34;
  --accent-color-opacity1: rgb(169 47 20 / 4%);
  --accent-color-opacity2: rgb(169 47 20 / 12%);
  --accent-color-opacity3: rgb(169 47 20 / 16%);
  --accent-color-opacity4: rgb(169 47 20 / 24%);
}

.secSolarizedRed {
  --accent-color: #9a101d;
  --primary-color-hover: #d8302d;
  --accent-color-hover: #da504d;
  --accent-color-active: #b8282b;
  --accent-color-light: #fa726f;
  --accent-color-visited: #d8302d;
  --accent-color-opacity1: rgb(186 16 29 / 4%);
  --accent-color-opacity2: rgb(186 16 29 / 12%);
  --accent-color-opacity3: rgb(186 16 29 / 16%);
  --accent-color-opacity4: rgb(186 16 29 / 24%);
}

.secSolarizedMagenta {
  --accent-color: #8e1060;
  --primary-color-hover: #d23480;
  --accent-color-hover: #dc5280;
  --accent-color-active: #b814a0;
  --accent-color-light: #fc5280;
  --accent-color-visited: #d23480;
  --accent-color-opacity1: rgb(176 20 96 / 4%);
  --accent-color-opacity2: rgb(176 20 96 / 12%);
  --accent-color-opacity3: rgb(176 20 96 / 16%);
  --accent-color-opacity4: rgb(176 20 96 / 24%);
}

.secSolarizedViolet {
  --accent-color: #2e43a4;
  --primary-color-hover: #6e83c4;
  --accent-color-hover: #8e77c4;
  --accent-color-active: #5e63e4;
  --accent-color-light: #ae95f4;
  --accent-color-visited: #6e83c4;
  --accent-color-opacity1: rgb(78 83 164 / 4%);
  --accent-color-opacity2: rgb(78 83 164 / 12%);
  --accent-color-opacity3: rgb(78 83 164 / 16%);
  --accent-color-opacity4: rgb(78 83 164 / 24%);
}

.secSolarizedBlue {
  --accent-color: #0283b2;
  --primary-color-hover: #4899d2;
  --accent-color-hover: #469fd2;
  --accent-color-active: #2483d4;
  --accent-color-light: #66b1f4;
  --accent-color-visited: #4899d2;
  --accent-color-opacity1: rgb(4 131 178 / 4%);
  --accent-color-opacity2: rgb(4 131 178 / 12%);
  --accent-color-opacity3: rgb(4 131 178 / 16%);
  --accent-color-opacity4: rgb(4 131 178 / 24%);
}

.secSolarizedCyan {
  --accent-color: #008776;
  --primary-color-hover: #2ca998;
  --accent-color-hover: #4cb9b8;
  --accent-color-active: #1c9788;
  --accent-color-light: #6ce1d8;
  --accent-color-visited: #2ca998;
  --accent-color-opacity1: rgb(8 135 118 / 4%);
  --accent-color-opacity2: rgb(8 135 118 / 12%);
  --accent-color-opacity3: rgb(8 135 118 / 16%);
  --accent-color-opacity4: rgb(8 135 118 / 24%);
}

.secSolarizedGreen {
  --accent-color: #657700;
  --primary-color-hover: #857720;
  --accent-color-hover: #a59640;
  --accent-color-active: #837720;
  --accent-color-light: #c5d940;
  --accent-color-visited: #857720;
  --accent-color-opacity1: rgb(101 119 0 / 4%);
  --accent-color-opacity2: rgb(101 119 0 / 12%);
  --accent-color-opacity3: rgb(101 119 0 / 16%);
  --accent-color-opacity4: rgb(101 119 0 / 24%);
}

/* region destructive color for red color themes
  using :has(.app) to increase specificity */
.mainRed:has(.app),
.secRed:has(.app),
.mainDraculaRed:has(.app),
.secDraculaRed:has(.app),
.mainSolarizedRed:has(.app),
.secSolarizedRed:has(.app) {
  --destructive-color: #9c27b0;
  --destructive-text-color: #fff;
  --destructive-hover-color: #8e24aa;
  --destructive-active-color: #6a1b9a;
}

/* Deal with theme conflict on destructive colors */
.mainRed.secPurple,
.mainRed.secDeepPurple,
.mainRed.secDraculaPurple,
.mainDraculaRed.secPurple,
.mainDraculaRed.secDeepPurple,
.mainDraculaRed.secDraculaPurple,
.mainSolarizedRed.secPurple,
.mainSolarizedRed.secDeepPurple,
.mainSolarizedRed.secDraculaPurple,
.mainPurple.secRed,
.mainPurple.secDraculaRed,
.mainDeepPurple.secRed,
.mainDeepPurple.secDraculaRed,
.mainDraculaPurple.secRed,
.mainDraculaPurple.secDraculaRed {
  --destructive-color: #ff9800;
  --destructive-text-color: #fff;
  --destructive-hover-color: #fb8c00;
  --destructive-active-color: #ef6c00;
}

body[dir='ltr'] {
  --ltr-or-rtl: ltr;
  --float-left-ltr-rtl-value: left;
  --float-right-ltr-rtl-value: right;
  --horizontal-directionality-coefficient: 1;
}

body[dir='rtl'] {
  --ltr-or-rtl: rtl;
  --float-left-ltr-rtl-value: right;
  --float-right-ltr-rtl-value: left;
  --horizontal-directionality-coefficient: -1;
}

body[dir='rtl'] [data-prefix='fas']:not([data-icon='magnifying-glass'], [data-icon='circle-question'], [data-icon='check']) {
  transform: scale(-1, 1);
}

/* Arabic, Kurdish, Persian and Urdu have a reversed question mark, but not Hebrew and Yiddish */
html[lang='ar'] [data-prefix='fas'][data-icon='circle-question'],
html[lang='fa'] [data-prefix='fas'][data-icon='circle-question'],
html[lang='ku'] [data-prefix='fas'][data-icon='circle-question'],
html[lang='ur'] [data-prefix='fas'][data-icon='circle-question'] {
  transform: scale(-1, 1);
}

body {
  margin: 0;
  min-block-size: 100vh;
  color: var(--primary-text-color);
  background-color: var(--bg-color);

  --red-500: #f44336;
}

.app {
  color: var(--primary-text-color);
  background-color: var(--bg-color);
}

/* stylelint-disable-next-line a11y/no-outline-none */
.hideOutlines *:focus {
  outline: none;
}

/* stylelint-disable-next-line no-descending-specificity */
a:link {
  color: var(--link-color);
}

/* stylelint-disable-next-line no-descending-specificity */
a:visited {
  color: var(--link-visited-color);
}

@media (prefers-reduced-motion) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

::-webkit-scrollbar {
  inline-size: auto;
  block-size: auto;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  border: 0;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:focus {
  background: var(--scrollbar-color-hover);
}
